<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2023-11-13 19:18:29
 * @LastEditors: htang
 * @LastEditTime: 2024-01-24 11:27:45
-->
<template>
  <a-drawer v-model:visible="visible" title="摄像头信息编辑" placement="right" :width="500">
    <a-form ref="formRef" :model="model" :rules="rules" :label-col="{ span: 9 }" @finish="onFinish">
      <a-form-item label="摄像头名称" name="name">
        <a-input v-model:value="model.name" allowClear placeholder="请输入摄像头名称" :maxlength="50" />
      </a-form-item>
      <a-form-item label="视频流方式" name="streamType">
        <JDictSelectTag v-model:value="model.streamType" placeholder="请选择视频流方式" dictCode="stream_type" allowClear />
      </a-form-item>
      <a-form-item label="摄像头编码" name="camCode">
        <a-input v-model:value="model.camCode" allowClear placeholder="请输入摄像头编码" :maxlength="50" />
      </a-form-item>
      <template v-if="model.streamType == 1">
        <a-form-item label="海康码" name="hikIndex">
          <a-input v-model:value="model.hikIndex" allowClear placeholder="请输入海康码" :maxlength="50" />
        </a-form-item>
      </template>
      <a-form-item label="站点编码" name="stationCode">
        <StationSelect v-model:value="model.stationCode" />
      </a-form-item>
      <a-form-item label="录像机编码" name="nvrCode">
        <a-select v-model:value="model.nvrCode" allowClear placeholder="请选择录像机编码">
          <template v-for="(item, index) in nvrList" :key="index">
            <a-select-option :value="item.nvrCode">
              {{ item.name }}
            </a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item label="摄像头账号" name="username">
        <a-input v-model:value="model.username" allowClear placeholder="请输入摄像头账号" />
      </a-form-item>
      <a-form-item label="摄像头密码" name="password">
        <a-input v-model:value="model.password" allowClear placeholder="请输入摄像头密码" />
      </a-form-item>
      <a-form-item label="内网IP" name="inIp">
        <a-input v-model:value="model.inIp" allowClear placeholder="请输入内网IP" />
      </a-form-item>
      <a-form-item label="内网端口" name="inPort">
        <a-input v-model:value="model.inPort" allowClear placeholder="请输入内网端口" />
      </a-form-item>
      <a-form-item label="公网IP" name="globalIp">
        <a-input v-model:value="model.globalIp" placeholder="请输入公网IP" />
      </a-form-item>
      <a-form-item label="公网端口" name="globalPort">
        <a-input v-model:value="model.globalPort" allowClear placeholder="请输入公网端口" />
      </a-form-item>
      <a-form-item label="快照" name="snapshotImg">
        <a-input v-model:value="model.snapshotImg" allowClear placeholder="请输入快照" />
      </a-form-item>
      <a-form-item label="通道" name="channel">
        <a-input v-model:value="model.channel" allowClear placeholder="请输入通道" />
      </a-form-item>
      <a-form-item label="操作">
        <a-button @click="resetForm">重置</a-button>
        <a-divider type="vertical" />
        <a-button type="primary" html-type="submit">提交保存</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script lang="ts">
import { watch, ref, defineComponent, getCurrentInstance } from 'vue';
import { JDictSelectTag } from '/@/components/Form';
import { cameraInfoApi, cameraAddApi, cameraModifyApi } from '/@/api/camera';
import { nvrListApi } from '@/api/nvr';
import { StationSelect } from '/@/components/StationSelect';
import { validateNvrAccount, validateNvrPassword, validateCameraCode, validateIP, validatePort } from './validate';
export default defineComponent({
  components: { JDictSelectTag, StationSelect },
  setup(props, { emit }) {
    let { proxy } = getCurrentInstance();
    let visible = ref(false);
    let model = ref({
      // 名称
      name: '',
      // 视频流方式
      streamType: '',
      // 摄像抢编码
      camCode: '',
      // 密码
      password: '',
      // 公网IP
      globalIp: '',
      // 公网端口
      globalPort: '',
      // 内网IP
      inIp: '',
      // 内网端口
      inPort: '',
      // 录像机编码
      nvrCode: '',
      // 站点编码
      stationCode: '',
      // 用户账号
      username: '',
      // 快照
      snapshotImg: '',
    });

    let rules = ref({
      ip: [{ required: true, message: '请输入IP地址' }],
      name: [{ required: true, message: '请输入摄像头名称' }],
      streamType: [{ required: true, message: '请选择摄像流方式' }],
      hikIndex: [{ required: true, message: '请输入海康码' }],
      camCode: [{ required: true, validator: validateCameraCode, trigger: 'change' }],
      nvrCode: [{ required: true, message: '请选择录像机编码' }],
      username: [{ required: true, validator: validateNvrAccount, trigger: 'change' }],
      password: [{ required: true, validator: validateNvrPassword, trigger: 'change' }],
      globalIp: [{ required: true, validator: validateIP, trigger: 'change' }],
      globalPort: [{ required: true, validator: validatePort, trigger: 'change' }],
      inIp: [{ required: true, validator: validateIP, trigger: 'change' }],
      inPort: [{ required: true, validator: validatePort, trigger: 'change' }],
      stationCode: [{ required: true, message: '请选择站点编码' }],
    });

    // 录像机列表
    let nvrList = ref([]);

    /**
     * 初始化数据
     * @param {number} id
     */
    function init(id) {
      cameraInfoApi({ id }).then((res) => {
        model.value = { ...res };
      });
    }

    /**
     * 初始化录像机列表
     */
    function initNvrList() {
      nvrListApi({}).then((res) => {
        nvrList.value = res;
      });
    }

    function resetForm() {
      proxy.$refs.formRef.resetFields();
    }

    function onFinish() {
      let data = {
        ...model.value,
      };
      if (!data['id']) {
        cameraAddApi(data).then((res) => {
          proxy.$refs.formRef.resetFields();
          visible.value = false;
          emit('oks');
        });
      } else {
        cameraModifyApi(data).then((res) => {
          proxy.$refs.formRef.resetFields();
          visible.value = false;
          emit('oks');
        });
      }
    }

    watch(
      () => visible.value,
      (v) => {
        if (v) {
          initNvrList();
        }
        if (!v) {
          delete model.value.id;
          proxy.$refs.formRef.resetFields();
        }
      },
      { deep: true }
    );

    return {
      init,
      visible,
      model,
      rules,
      nvrList,
      resetForm,
      onFinish,
    };
  },
});
</script>